<template>
  <div class="main" ref="full">
    <div class="head">
       <span
            class="fullScreenWraper"
          ><svg-icon
            icon-class="full"
            @click="fullScreen"
          /></span>
          <div class="title">
            <span>不凡数据大屏</span>
          </div>
            <div class="time">{{ timeText }}</div>
    </div>
    <div class="content">
      <div class="content-left">
           <div class="title">电商数据 <span>Shell Data</span></div>
            <div class="left-data">
              <div class="left-title">
                销售量
                <span class="num-unit">万元</span>
              </div>
              <div class="num-content">
                <!-- 判断是否有小数点 -->
                <div
                  v-for="(item, index) in numData.saleNum"
                  :key="index"
                  :class="item === '.' ? 'dot' : 'num-div'"
                >
                  {{ item }}
                </div>
                </div>
                 </div>
                  <div class="left-data">
              <div class="left-title">完成百分比</div>
              <div class="pro-wrapper">
              <Progress  :percentage="percentage"></Progress>
              </div>
            </div>
            <div class="title">热门搜索词 <span>Top Search</span></div>
            <div ref="wordsEcharts" class="words-echarts">
              <Myechart></Myechart>
            </div>
      </div>
      <div class="content-center">
        <div class="top">
<Histogram ></Histogram>
        </div>
        <div class="bottom">
          <div class="left">
<Map  :echarts-data="mapData"></Map>
          </div>
          <div class="right">
            <Rose></Rose>
          </div>
        </div>
      </div>
      <div class="content-right">
        <div class="top">
        <div class="title">统计数据 <span>Statistics Data</span></div>
            <div class="statistics-content">
              <div
                v-for="item in numData.statisticsData"
                :key="item.id"
                class="statistics-item"
              >
                <div class="left">
                  <img :src="item.img" alt="">
                </div>
                <div class="right">
                  <div class="wrapper">
                    <div class="value">{{ item.value }}</div>
                    <div class="text">{{ item.text }}</div>
                  </div>
                </div>
              </div>
            </div>
            </div>
            <div class="bottom">
              <div style="margin: 20px 0" class="title">
              大额订单Top <span>Supper Orders</span>
            </div>
            <div class="table-wrapper">
              <Mytable :table-data="tableData" />
            </div>
            </div>
      </div>
    </div>
     <div class="bottom-bg">
        <CanvasBg ref="canvasBg" />
      </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { mapData, statisticsData, tableData } from './data.js'
import  Progress from "./componet/progress"
import Myechart from "./componet/myechart"
import Histogram from '@/views/dashboard/componet/Histogram'
import Map from "./componet/map"
import Rose from"./componet/roseType"
import Mytable from "./componet/mytable"
import CanvasBg from"./componet/canvasBg"
// 全屏插件
import screenfull from 'screenfull'
export default {
  data(){
    return{
      timeText:'',
         timer: null, // 定时器(时间显示的)
            numData: {
                saleNum: '1301028.4', // 电商数据的 销售量(假数据)
                statisticsData: statisticsData // 统计数据(假数据)
            },
             percentage: 55,
             mapData:mapData,
             tableData:tableData
    }
  },
  name: 'Dashboard',
  computed: {

  },
  components:{
    Progress,
    Myechart,
    Histogram,
    Map,
    Rose,
    Mytable,
     CanvasBg
  },
  created(){
    this.timeText=this.formatDate(new Date()),
         this.initNumChange()
          setTimeout(() => {
            this.percentage = 87
        }, 3000)
  },
  methods:{
    fullScreen(){
        if (screenfull.isEnabled) {
                // 控制是否全屏的按钮
                screenfull.toggle(this.$refs.full)
            }
    },
    // 格式化时间
        formatDate(date) {
            // 格式化时间为 YYYY-MM-DD HH:MM:SS
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var day = date.getDate()
            var hours = date.getHours()
            var minutes = date.getMinutes()
            var seconds = date.getSeconds()
            // 判断是不是小于10 返回01 02 03
            function check(num) {
                if (num < 10) {
                    // 如果数字小于10,前边拼接个0
                    return '0' + num
                } else {
                    return num
                }
            }
            // 时间展示
            return `
            ${check(year)}-
            ${check(month)}-
            ${check(day)}
            ${check(hours)}:
            ${check(minutes)}:
            ${check(seconds)}`
        },
         timeStart() {
            // 设置定时器
            this.timer = setInterval(() => {
                this.timeText = this.formatDate(new Date())
            }, 1000)
        },
          numChangeDelay(initNum) {
            // 先转换成string类型
            var numStr = initNum + ''
            // 打断点小数点
            var dotArr = numStr.split('.')
            // 为了去掉小数点,初始化倍数
            var mutiple = 1
            if (dotArr[1]) {
                // 倍数等于小数点后的小数的位数  **是指数的意思
                mutiple = 10 ** (dotArr[1].length)
            }
            // 去掉小数点后的数字
            var endNum = Number(initNum) * mutiple
            var startNum; var numTimer = null
            if (endNum > 100000) {
                // 设置开始数字
                startNum = endNum - 100000
                // 展示的数字字符串
                this.numData.saleNum = startNum / mutiple + ''
                // 设置定时器
                numTimer = setInterval(() => {
                    // 每次变化100
                    startNum = startNum + 100
                    this.numData.saleNum = startNum / mutiple + ''
                    // 当起始的数 和结束的数相差小于 变化值的时候 ,清除定时器
                    if (endNum - startNum < 100) {
                        clearInterval(numTimer)
                    }
                }, 10)
            } else if (endNum > 100 && endNum < 100000) {
                // 设置开始数字
                startNum = endNum - 100
                // 展示的数字字符串
                this.numData.saleNum = startNum / mutiple + ''
                // 设置定时器
                numTimer = setInterval(() => {
                    // 每次变化100
                    startNum = startNum + 100
                    this.numData.saleNum = startNum / mutiple + ''
                    // 当起始的数 和结束的数相差小于 变化值的时候 ,清除定时器
                    if (endNum - startNum < 100) {
                        clearInterval(numTimer)
                    }
                }, 10)
            }
        },
        // 数字变化
        initNumChange() {
            // 销售量数据缓变
            this.numChangeDelay(this.numData.saleNum)
        },
  },
  mounted() {
    this.timeStart()
  },
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.main{
  position: relative;
    width: 100%;
    background-color: #0a1631;
    .head{
     position: relative;
    overflow: hidden;
    width: 100%;
    height: 100px;
    .fullScreenWraper{
      position: absolute;
    left: 10px;
    top: 10px;
    font-size: 25px;
    color: #9aa8d4;
    }
    .title{
      margin: 0 auto;
    background: url(http://shen_hao222.gitee.io/test_page/static/img/titleBG.a4cdf1b6.png);
    background-size: 100% 100%;
    background-position: 50%;
    width: 70%;
    height: 122px;
    text-align: center;
    line-height: 100px;
    font-size: 36px;
    span{
      font-family: Microsoft Yahei,Arial,sans-serif;
    font-size: 36px;
    color: #fff;
    text-shadow: #fff 0 0 15px;
    font-weight: 700;
    }
    }
    .time{
      position: absolute;
    right: 30px;
    top: 20px;
    margin-right: 20px;
    font-family: Microsoft Yahei,Arial,sans-serif;
    font-size: 20px;
    color: #fff;
    font-weight: 400;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    }
    }
    .content{
      position: relative;
    width: 100%;
    height: 800px;
    .content-left{
      position: relative;
    float: left;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 0 0 10px;
    width: 25%;
     .title {
            font-family: 'Microsoft Yahei', Arial, sans-serif;
            font-size: 22px;
            color: rgb(154, 168, 212);
            font-weight: normal;

            span {
              font-family: 'Microsoft Yahei', Arial, sans-serif;
              font-size: 20px;
              color: rgb(64, 77, 105);
              font-weight: normal;
              justify-content: center;
              text-align: center;
            }
          }
          .left-data {
            margin: 20px 0;
            .left-title {
              font-family: 'Microsoft Yahei', Arial, sans-serif;
              font-size: 16px;
              color: rgb(154, 168, 212);
              .num-unit {
                float: right;
                font-family: 'Microsoft Yahei', Arial, sans-serif;
                font-size: 16px;
                color: rgb(115, 170, 229);
                justify-content: center;
                text-align: center;
              }
            }

            .num-content {
              display: flex;
              //   margin-left: 10px;
              margin-top: 20px;
              .num-div {
                font-family: 'Microsoft Yahei';
                font-size: 55px;
                font-weight: bold;
                color: rgb(255, 255, 255);
                margin-left: 3px;
                margin-right: 3px;
                box-sizing: content-box;
                width: 10%;
                text-align: center;
                background-color: rgb(15, 57, 107);
              }
              .dot {
                font-family: 'Microsoft Yahei';
                font-size: 55px;
                font-weight: bold;
                color: rgb(255, 255, 255);
                margin-left: 3px;
                margin-right: 3px;
              }
            }
            .pro-wrapper {
              margin: 0 auto;
              position: relative;

              width: 85%;
            }
          }
          .words-echarts {
            margin-top: 20px;
            position: relative;
            width: 100%;
            height: 390px;

          }
    }
    .content-center{
      width: 50%;
      float: left;


      .top{
        width: 95%;
    margin: 0 auto;
    height: 360px;
      }
      .bottom{
          width: 95%;
    margin: 0 auto;
    height: 357px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .left{
      width: 50%;
      height: 100%;

    }
    .right{
       width: 50%;
      height: 100%;
      z-index: 9;

    }

      }
    }
    .content-right{
       position: relative;
    float: left;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 0 0 10px;
    width: 25%;
    box-sizing: border-box;
          padding-right: 10px;
          .title {
            font-family: 'Microsoft Yahei', Arial, sans-serif;
            font-size: 22px;
            color: rgb(154, 168, 212);
            font-weight: normal;

            span {
              font-family: 'Microsoft Yahei', Arial, sans-serif;
              font-size: 20px;
              color: rgb(64, 77, 105);
              font-weight: normal;
              justify-content: center;
              text-align: center;
            }
          }
          .statistics-content {
            position: relative;
            width: 100%;
            height: 150px;
            margin-top: 20px;

            .statistics-item {
              position: relative;
              float: left;
              width: 50%;
              height: 50%;
              //   background-color: red;
              .left {
                position: relative;
                float: left;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;
                width: 35%;
                img {
                  width: 80%;
                }
              }
              .right {
                position: relative;
                float: left;
                box-sizing: border-box;
                display: flex;
                // justify-content: center;
                align-items: center;
                height: 100%;
                width: 65%;
                padding-left: 15px;
                .wrapper {
                  .value {
                    font-family: 'Microsoft Yahei';
                    font-size: 32px;
                    font-weight: bold;
                    color: rgb(255, 255, 255);
                  }
                  .text {
                    margin-top: 4px;
                    font-family: 'Microsoft Yahei';
                    font-size: 12px;
                    color: rgb(176, 194, 249);
                    align-self: flex-start;
                  }
                }
                .table-wrapper {
                  position: relative;
                  width: 100%;
                }
              }
            }
          }
    }
    }
    .bottom-bg {
      position: absolute;
      z-index: 1;
      // margin-top: -10px;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 25%;
    }
}

</style>
